<template>
  <div class="register-page">
    <HeaderComponent/>
    <div class="register-container">
      <div class="register-content">
        <h1 class="register-title">注册战神二手校园交易平台</h1>
        <a-form
            :model="formState"
            name="normal_register"
            class="register-form"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
          <a-form-item
              name="account"
              :rules="[{ required: true, message: '请输入账号!' }]"
          >
            <a-input
                v-model:value="formState.account"
                size="large"
                placeholder="账号"
            >
              <template #prefix>
                <UserOutlined class="site-form-item-icon"/>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
              name="username"
              :rules="[{ required: true, message: '请输入用户名!' }]"
          >
            <a-input
                v-model:value="formState.username"
                size="large"
                placeholder="用户名"
            >
              <template #prefix>
                <UserOutlined class="site-form-item-icon"/>
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
              name="email"
              :rules="[
              { required: true, message: '请输入邮箱!' },
              { type: 'email', message: '请输入有效的邮箱地址!' }
            ]"
          >
            <a-input
                v-model:value="formState.email"
                size="large"
                placeholder="邮箱"
            >
              <template #prefix>
                <MailOutlined class="site-form-item-icon"/>
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
              name="password"
              :rules="[
              { required: true, message: '请输入密码!' },
              { min: 6, message: '密码长度不能小于6个字符!' }
            ]"
          >
            <a-input-password
                v-model:value="formState.password"
                size="large"
                placeholder="密码"
            >
              <template #prefix>
                <LockOutlined class="site-form-item-icon"/>
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item
              name="confirm"
              :rules="[
              { required: true, message: '请确认密码!' },
              { validator: validateConfirmPassword }
            ]"
          >
            <a-input-password
                v-model:value="formState.confirm"
                size="large"
                placeholder="确认密码"
            >
              <template #prefix>
                <LockOutlined class="site-form-item-icon"/>
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item>
            <a-checkbox v-model:checked="formState.agreement">
              我已阅读并同意 <a href="">用户协议</a>
            </a-checkbox>
          </a-form-item>

          <a-form-item>
            <a-button
                :disabled="disabled"
                type="primary"
                html-type="submit"
                class="register-form-button"
                size="large"
                :loading="loading"
            >
              注册
            </a-button>
          </a-form-item>

          <div class="login-link">
            已有账号?
            <router-link to="/Login">立刻登录!</router-link>
          </div>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, computed} from 'vue';
import {UserOutlined, LockOutlined, MailOutlined} from '@ant-design/icons-vue';
import {message} from 'ant-design-vue';
import HeaderComponent from "@/components/user/HeaderComponent.vue";
import {useUserStore} from "@/stores/index.js";
import {useRouter} from "vue-router";

const userStore = useUserStore();
const {register, error, loading} = userStore;
const formState = reactive({
  account: '',
  username: '',
  email: '',
  password: '',
  confirm: '',
  agreement: false,
});
const router = useRouter();

const validateConfirmPassword = async (rule, value) => {
  if (value !== formState.password) {
    throw new Error('两次输入的密码不一致!');
  }
};

const onFinish = async () => {
  if (!formState.agreement) {
    message.error('请阅读并同意用户协议');
    return;
  }
  try {
    const success = await register(formState.account, formState.username, formState.email, formState.password);
    if (success) {
      await router.push({path: '/Login'});
    }
  } catch (err) {
    message.error(error || "注册失败，请重试");
  }
};

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
  message.error("表单验证失败，请检查输入");
};

const disabled = computed(() => {
  return !(formState.username && formState.email && formState.password && formState.confirm && formState.agreement);
});
</script>

<style scoped>
.register-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
}

.register-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.register-content {
  width: 100%;
  max-width: 400px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.register-title {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.register-form :deep(.ant-form-item) {
  margin-bottom: 24px;
}

.register-form :deep(.ant-input-affix-wrapper) {
  border-radius: 6px;
}

.register-form-button {
  width: 100%;
}

.login-link {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
}

.login-link a {
  color: #1890ff;
  font-weight: bold;
}

@media screen and (max-width: 480px) {
  .register-content {
    padding: 30px 20px;
  }

  .register-title {
    font-size: 20px;
  }
}
</style>